<template>
  <div class="apply-box">
    <div class="title">
        <h1>同学你好，请选择你要申报的年份和年级!</h1>
    </div>
    <div class="year">
        <label for="">请选择你要申报年份:</label>
        <el-select v-model="options1.value" class="m-2" placeholder="请选择" size="large">
            <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
    </div>
    <div class="grade">
        <label for="">请选择你的申报年级:</label>
        <el-select v-model="options2.value" class="m-2" placeholder="请选择" size="large">
            <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
    </div>
    <div class="footer">
        <el-button type="primary" @click="submit1">确认</el-button>
        <!-- <el-button type="info" @click="reset">重置</el-button> -->
    </div>
    <!-- 申报对话框 -->
    <div>
        <!-- 研究生一年级 -->
        <el-dialog
            v-if="dialogVisible1" v-model="dialogVisible1" 
            title="研究生一年级"
            >
            <div class="centered-dialog">
            <el-form ref="myForm1" :model="formData1" :rules="rules"  label-width="80px">
                <el-form-item label="学号" prop="sno">
                    <el-input v-model="formData1.sno" style="width: 180px;"></el-input>
                </el-form-item>
                <el-form-item label="学位课总成绩" prop="totalgrade" style="white-space: nowrap;">
                    <el-input v-model="formData1.学位成绩.学位课总成绩" style="width: 180px;"></el-input>
                </el-form-item>
                <el-form-item label="学位课数量" prop="number" style="white-space: nowrap;">
                    <el-input   v-model="formData1.学位成绩.学位课数量" style="width: 180px;"></el-input>
                </el-form-item>
                <span class="dialog-footer" style="margin-left: 70px;">
                <el-button @click="dialogVisible1 = false">关闭</el-button>
                <el-button type="primary" @click="submitForm1">提交</el-button>
                </span>
                </el-form>
            </div>
        </el-dialog>

        <!-- 研究生二年级 -->
        <el-dialog
            v-model="dialogVisible2"
            title="研究生二年级"
            >
            <div class="centered-dialog">
            <el-form ref="myForm2" :model="formData2" :rules="rules"   label-width="80px">
                <el-form-item label="学号" prop="sno">
                    <el-input v-model="formData2.sno" style="width: 180px;"></el-input>
                </el-form-item>
                <div style="font-weight: bold;margin-bottom: 5px;">一、学位成绩</div>
                <el-form-item label="学位课总成绩" prop="totalgrade" style="white-space: nowrap;">
                    <el-input v-model="formData2.学位成绩.学位课总成绩" style="width: 180px;"></el-input>
                </el-form-item>
                <el-form-item label="学位课数量" prop="number" style="white-space: nowrap;">
                    <el-input-number :min="1" :max="100" v-model="formData2.学位成绩.学位课数量" style="width: 180px;"></el-input-number>
                </el-form-item>
                <div style="font-weight: bold;margin-bottom: 5px;">二、思政表现</div>
                <el-form-item label="荣誉加分">
                <el-select v-model="formData2.思政表现.荣誉加分" placeholder="荣誉加分">
                    <el-option label="优秀" value="优秀" />
                    <el-option label="良好" value="良好" />
                    <el-option label="合格" value="合格" />
                </el-select>
                </el-form-item>
                <el-form-item label="导师组评价"  style="white-space: nowrap;">
                    <el-select v-model="formData2.思政表现.导师组评价" placeholder="导师组评价">
                        <el-option label="优秀" value="优秀"/>
                        <el-option label="良好" value="良好"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="通报次数">
                    <el-input-number v-model="formData2.思政表现.通报次数" :min="0" :max="100"/>
                </el-form-item>
                
                <div style="font-weight: bold;margin-bottom: 5px;">三、科研能力</div>
                    <!-- 添加按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="addNewFormItem">添加竞赛</el-button>
                </el-form-item>

                <!-- 新增的表单项，根据数据项动态渲染 -->
                <el-form-item v-for="(item, index) in formData2.科研能力.竞赛" :key="index" :label="item.label">
                    <template v-if="item.type === 'input'">
                        <el-input v-model="item.value"></el-input>
                    </template>
                    <template v-if="item.type === 'select'">
                        <el-select v-model="item.value" placeholder="请选择获奖级别">
                            <el-option label="无" value="无"/>
                            <el-option label="省级一等奖" value="省级一等奖"/>
                            <el-option label="省级二等奖" value="省级二等奖"/>
                            <el-option label="省级三等奖" value="省级三等奖"/>
                        </el-select>
                    </template>
                    <template v-if="item.type === 'upload'">
                         <el-upload
                                                                class="upload-demo"
                                                                action="http://localhost:9999/upload"
                                                                :before-upload="handleBeforeUpload"
                                                                :on-success="xuekejingsaihandleSuccessForm2"
                                                                :on-error="handleError"
                                                                :file-list="fileList"
                                                                style="padding: 8px" 
                                                                 accept=".doc,.docx,.pdf"
                                                              >
                                                                <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                                                                <div slot="tip" class="el-upload__tip">只能上传.doc .docx .pdf类型文件</div>
                                                              </el-upload>
                    </template>
                </el-form-item>

                <!-- 添加按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="addNewFormItem2">添加论文</el-button>
                </el-form-item>

                <!-- 新增的表单项，根据数据项动态渲染 -->
                <el-form-item v-for="(item, index) in formData2.科研能力.学术论文" :key="index" :label="item.label">
                    <template v-if="item.type === 'input'">
                        <el-input v-model="item.value"></el-input>
                    </template>
                    <template v-if="item.type === 'select'">
                        <el-select v-model="item.value" placeholder="请选择论文级别">
                            <el-option label="无" value="无"/>
                            <el-option label="EI" value="EI"/>
                            <el-option label="SCI" value="SCI"/>
                            <el-option label="CFF推荐A类" value="CFF推荐A类"/>
                            <el-option label="CFF推荐B类" value="CFF推荐B类"/>
                        </el-select>
                    </template>
                    <template v-if="item.type === 'upload'">
<!--                        <el-upload-->
<!--                            class="attachment-uploader"-->
<!--                            :on-change="handleChange"-->
<!--                        >-->
<!--                            <el-button size="small" type="primary">上传文件</el-button>-->
<!--                        </el-upload>-->
                          <el-upload
                                                                class="upload-demo"
                                                                action="http://localhost:9999/upload"
                                                                :before-upload="handleBeforeUpload"
                                                                :on-success="xueshulunwenhandleSuccessForm2"
                                                                :on-error="handleError"
                                                                :file-list="fileList"
                                                                style="padding: 8px" 
                                                                 accept=".doc,.docx,.pdf"
                                                              >
                                                                <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                                                                <div slot="tip" class="el-upload__tip">只能上传.doc .docx .pdf类型文件</div>
                                                              </el-upload>
                    </template>
                </el-form-item>
                <span class="dialog-footer" style="margin-left: 70px;">
                <el-button @click="dialogVisible2 = false">关闭</el-button>
                <el-button type="primary" @click="submitForm2">提交</el-button>
                </span>
                </el-form>
            </div>
        </el-dialog>
        <!-- 研究生三年级 -->
        <el-dialog
            v-model="dialogVisible3"
            title="研究生三年级"
            >
            <div class="centered-dialog">
            <el-form ref="myForm3" :model="formData3" :rules="rules"   label-width="80px">
                <el-form-item label="学号" prop="sno">
                    <el-input v-model="formData3.sno" style="width: 180px;"></el-input>
                </el-form-item>

                <div style="font-weight: bold;margin-bottom: 5px;">一、思政表现</div>
                <el-form-item label="荣誉加分">
                <el-select v-model="formData3.思政表现.荣誉加分" placeholder="荣誉加分">
                    <el-option label="优秀" value="优秀" />
                    <el-option label="良好" value="良好" />
                    <el-option label="合格" value="合格" />
                </el-select>
                </el-form-item>
                <el-form-item label="导师组评价"  style="white-space: nowrap;">
                    <el-select v-model="formData3.思政表现.导师组评价" placeholder="导师组评价">
                        <el-option label="优秀" value="优秀"/>
                        <el-option label="良好" value="良好"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="通报次数">
                    <el-input-number v-model="formData3.思政表现.通报次数" :min="0" :max="100" />
                </el-form-item>
                
                <div style="font-weight: bold;margin-bottom: 5px;">二、科研能力</div>
                    <!-- 添加按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="addNewFormItem4">添加竞赛</el-button>
                </el-form-item>

                <!-- 新增的表单项，根据数据项动态渲染 -->
                <el-form-item v-for="(item, index) in formData3.科研能力.竞赛" :key="index" :label="item.label">
                                        <!-- 判断是输入框  -->
                    <template v-if="item.type === 'input'">
                        <el-input v-model="item.value"></el-input>
                    </template>
                                        <!-- 判断是下拉框  -->
                    <template v-if="item.type === 'select'">
                        <el-select v-model="item.value" placeholder="请选择获奖级别">
                            <el-option label="无" value="无"/>
                            <el-option label="省级一等奖" value="省级一等奖"/>
                            <el-option label="省级二等奖" value="省级二等奖"/>
                            <el-option label="省级三等奖" value="省级三等奖"/>
                        </el-select>
                    </template>
                        <!-- 判断是上传控件  -->
                    <template v-if="item.type === 'upload'">
                          <template v-if="item.type === 'upload'">
                         <el-upload
                                                                class="upload-demo"
                                                                action="http://localhost:9999/upload"
                                                                :before-upload="handleBeforeUpload"
                                                                :on-success="xuekejingsaihandleSuccessForm3"
                                                                :on-error="handleError"
                                                                :file-list="fileList"
                                                                style="padding: 8px" 
                                                                 accept=".doc,.docx,.pdf"
                                                              >
                                                                <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                                                                <div slot="tip" class="el-upload__tip">只能上传.doc .docx .pdf类型文件</div>
                                                              </el-upload>
                    </template>
                    </template>
                </el-form-item>

                <!-- 添加按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="addNewFormItem5">添加论文</el-button>
                </el-form-item>

                <!-- 新增的表单项，根据数据项动态渲染 -->
                <el-form-item v-for="(item, index) in formData3.科研能力.学术论文" :key="index" :label="item.label">
                    <template v-if="item.type === 'input'">
                        <el-input v-model="item.value"></el-input>
                    </template>
                    <template v-if="item.type === 'select'">
                        <el-select v-model="item.value" placeholder="请选择论文级别">
                            <el-option label="无" value="无"/>
                            <el-option label="EI" value="EI"/>
                            <el-option label="SCI" value="SCI"/>
                            <el-option label="CFF推荐A类" value="CFF推荐A类"/>
                            <el-option label="CFF推荐B类" value="CFF推荐B类"/>
                        </el-select>
                    </template>
                    <template v-if="item.type === 'upload'">
                        <el-upload
                                                                class="upload-demo"
                                                                action="http://localhost:9999/upload"
                                                                :before-upload="handleBeforeUpload"
                                                                :on-success="xueshulunwenhandleSuccessForm3"
                                                                :on-error="handleError"
                                                                :file-list="fileList"
                                                                style="padding: 8px" 
                                                                 accept=".doc,.docx,.pdf"
                                                              >
                                                                <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                                                                <div slot="tip" class="el-upload__tip">只能上传.doc .docx .pdf类型文件</div>
                                                              </el-upload>
                    </template>
                </el-form-item>
                <span class="dialog-footer" style="margin-left: 70px;">
                <el-button @click="dialogVisible3 = false">关闭</el-button>
                <el-button type="primary" @click="submitForm3">提交</el-button>
                </span>
                </el-form>
            </div>
        </el-dialog>
    </div>
    
  </div>
</template>

<script>
  

    

export default {
    data() {
        return {
                    rules:[],
            options1:[  
                {
                    value: '2023',
                    label: '2023',
                },
                {
                    value: '2024',
                    label: '2024',
                }
            ],
            options2:[  
            {
                    value: '研究生一年级',
                    label: '研究生一年级',
                },
                {
                    value: '研究生二年级',
                    label: '研究生二年级',
                },
                {
                    value: '研究生三年级',
                    label: '研究生三年级',
                },
            ],
            uploadUrl: '/upload', // 文件上传接口地址
            dialogVisible1:false,
            dialogVisible2:false,
            dialogVisible3:false,
            formData1:{
                "年":'',
                "grade":'',
                sno:'',
                "学位成绩":{},
            },
            formData2:{
                              "年":'',
                "grade":'',
                               sno:'',
                "学位成绩":{},
                "思政表现":{},
                "科研能力":{
                    // 存放竞赛数组
                    竞赛:[],
                    竞赛文件:[],
                    // 存放论文的数组
                    学术论文:[],
                    学术论文文件:[]
                },
            },
            formData3:{
                              "年":'',
                "grade":'',
                               sno:'',
                "思政表现":{},
                "科研能力":{
                    // 存放竞赛数组
                      竞赛:[],
                    竞赛文件:[],
                    // 存放论文的数组
                    学术论文:[],
                    学术论文文件:[]
                },
            },
            
        }
    },
    methods:{
        
        submit1() {
            console.log(this.options2.value)
            if(this.options2.value === '研究生一年级') {
                this.dialogVisible1 = true
                    this.formData1={
                    "年":'',
                    "grade":'',
                    sno:'',
                    "学位成绩":{},
                }
                  
            }
            if(this.options2.value === '研究生二年级') {
                            this.formData2={
                                  "年":'',
                    "grade":'',
                                   sno:'',
                    "学位成绩":{},
                    "思政表现":{},
                    "科研能力":{
                        // 存放竞赛数组
                         竞赛:[],
                        竞赛文件:[],
                        // 存放论文的数组
                        学术论文:[],
                        学术论文文件:[]
                    },
                }
                this.dialogVisible2 = true
            }
            if(this.options2.value === '研究生三年级') {
                            this.formData3={
                                      "年":'',
                        "grade":'',
                                       sno:'',
                        "思政表现":{},
                        "科研能力":{
                            // 存放竞赛数组
                               竞赛:[],
                                竞赛文件:[],
                                // 存放论文的数组
                                学术论文:[],
                                学术论文文件:[]
                        },
                    }
     
                this.dialogVisible3 = true
            }

        },
        handleChange(file) {
            this.formData2.科研能力.学术论文.push(file.raw) // 将文件对象保存到表单数据中
            console.log('文件上传成功')
            console.log(this.formData2.科研能力.学术论文)
            this.buttontext =  file.name
            
        },
        handleChange2(file) {
            this.formData2.科研能力.竞赛.push(file.raw) // 将文件对象保存到表单数据中
            console.log('文件上传成功')
            console.log(this.formData2.科研能力.竞赛)
            
        },

        // 研究生二年级
        addNewFormItem() {
            this.formData2.科研能力.竞赛.push({ label: '竞赛名称', value: '' , type: 'input'})
            this.formData2.科研能力.竞赛.push({ label: '获奖级别', value: '' , type: 'select'})
            this.formData2.科研能力.竞赛.push({ label: '附件', value: '',type:'upload' })
        },
        addNewFormItem2() {
            this.formData2.科研能力.学术论文.push({ label: '论文名称', value: '' , type: 'input'})
            this.formData2.科研能力.学术论文.push({ label: '论文级别', value: '' , type: 'select'})
            this.formData2.科研能力.学术论文.push({ label: '附件', value:'',type:'upload' })
            
        },
        // 研究生三年级
        addNewFormItem4() {
            this.formData3.科研能力.竞赛.push({ label: '竞赛名称', value: '' , type: 'input'})
            this.formData3.科研能力.竞赛.push({ label: '获奖级别', value: '' , type: 'select'})
            this.formData3.科研能力.竞赛.push({ label: '附件', value: '',type:'upload' })
        },
        addNewFormItem5() {
            this.formData3.科研能力.学术论文.push({ label: '论文名称', value: '' , type: 'input'})
            this.formData3.科研能力.学术论文.push({ label: '论文级别', value: '' , type: 'select'})
            this.formData3.科研能力.学术论文.push({ label: '附件', value:'',type:'upload' })
            
        },
        // 把研究生一年级的表单数据发送给后端
        submitForm1() {
                    this.formData1.年 = this.options1.value
                    this.formData1.grade = this.options2.value
            console.log("this.formData1=", this.formData1)
                    
                request({ 
                  url :  '/Grade2',
                  method :  'POST',
                  data : this.formData1
                }).then(res => {
                    console.log("res=", res)
                  if(res.code === '200'){
                      if(res.data.code === '200') {
                          this.dialogVisible1 = false
                          ElMessage.success('操作成功')
                      }else {
                                ElMessage.error(res.data.msg)//后端返回的错误信息
                      }
                  }else{
                    ElMessage.error(res.msg)//后端返回的错误信息
                  }
                })

        },
        // 把研究生二年级的表单数据发送给后端
        submitForm2(){
            this.formData2.年 = this.options1.value
            this.formData2.grade = this.options2.value
            console.log("this.formData2=", this.formData2)
                    
                request({ 
                  url :  '/Grade2',
                  method :  'POST',
                  data : this.formData2
                }).then(res => {
                    console.log("res=", res)
                  if(res.code === '200'){
                      if(res.data.code === '200') {
                          this.dialogVisible1 = false
                          ElMessage.success('操作成功')
                      }else {
                                ElMessage.error(res.data.msg)//后端返回的错误信息
                      }
                  }else{
                    ElMessage.error(res.msg)//后端返回的错误信息
                  }
                })
        
        },
        // 把研究生三年级的表单数据发送给后端
        submitForm3(){
                    this.formData3.年 = this.options1.value
            this.formData3.grade = this.options2.value
            console.log("this.formData3=", this.formData3)
                    
                request({ 
                  url :  '/Grade2',
                  method :  'POST',
                  data : this.formData3
                }).then(res => {
                    console.log("res=", res)
                  if(res.code === '200'){
                      if(res.data.code === '200') {
                          this.dialogVisible1 = false
                          ElMessage.success('操作成功')
                      }else {
                                ElMessage.error(res.data.msg)//后端返回的错误信息
                      }
                  }else{
                    ElMessage.error(res.msg)//后端返回的错误信息
                  }
                })
        },
         handleBeforeUpload(file) {
              // 在此处可以对文件进行验证或其他操作
              // 返回 false 可以阻止文件上传
            },
            xueshulunwenhandleSuccessForm2(response, file) {
              // 上传成功后的处理逻辑
                console.log("response=", response) 
                console.log("file=", file)
                console.log("this.formData2.科研能力=", this.formData2.科研能力)
                console.log("this.formData2.科研能力.学术论文文件=", this.formData2.科研能力.学术论文文件)
                 this.formData2.科研能力.学术论文文件.push({name:file.name,url:response})
                console.log("this.formData2.科研能力.学术论文文件=", this.formData2.科研能力.学术论文文件)
            },
            xuekejingsaihandleSuccessForm2(response, file) {
              // 上传成功后的处理逻辑
                console.log("response=", response)
                console.log("response.data=", response.data)
                console.log("file=", file)
                      this.formData2.科研能力.竞赛文件.push(response)
                console.log("this.formData2.科研能力.竞赛文件=", this.formData2.科研能力.竞赛文件) 
            },
            xueshulunwenhandleSuccessForm3(response, file) {
              // 上传成功后的处理逻辑
                console.log("response=", response) 
                console.log("file=", file)
                 this.formData3.科研能力.学术论文文件.push({name:file.name,url:response})
                console.log("this.formData3.科研能力.学术论文文件=", this.formData3.科研能力.学术论文文件)
            },
            xuekejingsaihandleSuccessForm3(response, file) {
              // 上传成功后的处理逻辑
                console.log("response=", response)
                console.log("response.data=", response.data)
                console.log("file=", file)
                      this.formData3.科研能力.竞赛文件.push(response)
                console.log("this.formData3.科研能力.竞赛文件=", this.formData3.科研能力.竞赛文件) 
            },
            handleError(error, file) {
              // 上传失败后的处理逻辑
            },
    }
}
</script>

<style>
.apply-box{
    height: 200px;
}
.title{
    height: 50px;
    margin: 0px auto;
    text-align: center;
}
.year{
    height: 50px;
    margin: 10px auto;
    text-align: center;
    
}
.grade {
    height: 50px;
    margin: 10px auto;
    text-align: center;
}
.footer{
    text-align: center;
}
.centered-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>